<template>
  <el-form class="pro-panels" v-for="item in props.explosion" :key="item">
    <el-form-item label="目标对象">
      <div class="mb-2 flex items-center text-sm">
        <el-radio-group v-model="item.radio" class="ml-4">
          <el-radio label="0" size="large">场景</el-radio>
          <el-radio label="1" size="large">面板</el-radio>
        </el-radio-group>
        <el-tree-select
          v-model="item.data"
          :data="props.datas"
          multiple
          :render-after-expand="false"
          collapse-tags="true"
        />
      </div>
    </el-form-item>
    <el-form-item label="爆炸参数" :inline="true" class="horizontal">
      <SvgIcon icon-class="logo" @click="flushed(item)" style="justify-content: flex-end" />
    </el-form-item>
    <el-form-item label="中心爆炸" class="horizontal">
      <el-switch v-model="item.centerBoom" />
    </el-form-item>
    <el-form-item label="X轴">
      <div style="width: 80%">
        <el-slider v-model="item.boomSliderValue.boomSliderValueX" :min="-10" :max="10" :step="1" />
      </div>
      <div style="width: 20%">
        <el-input v-model="item.boomSliderValue.boomSliderValueX" />
      </div>
    </el-form-item>
    <el-form-item label="Y轴">
      <div style="width: 80%">
        <el-slider v-model="item.boomSliderValue.boomSliderValueY" :min="-10" :max="10" :step="1" />
      </div>
      <div style="width: 20%">
        <el-input v-model="item.boomSliderValue.boomSliderValueY" />
      </div>
    </el-form-item>

    <el-form-item label="Z轴">
      <div style="width: 80%">
        <el-slider v-model="item.boomSliderValue.boomSliderValueZ" :min="-10" :max="10" :step="1" />
      </div>
      <div style="width: 20%">
        <el-input v-model="item.boomSliderValue.boomSliderValueZ" />
      </div>
    </el-form-item>
    <div class="action">
      <div class="action1">
        <el-form-item label="爆炸速度">
          <el-select v-model="item.explosionFfect" class="m-2">
            <el-option
              v-for="items in props.explosionEffects"
              :key="items.speed"
              :value="items.speed"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="action2">
        <el-form-item label="爆炸效果">
          <el-select v-model="item.explosionSpeed" class="m-2">
            <el-option
              v-for="items in props.explosionSpeeds"
              :key="items.speed"
              :value="items.speed"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="action1">
        <el-form-item label="爆炸次数">
          <el-select v-model="item.explosionNumber" class="m-2">
            <el-option
              v-for="items in props.explosionNumbers"
              :key="items.speed"
              :value="items.speed"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="action2">
        <el-form-item label="爆炸延迟">
          <el-input v-model="item.explosionDelay" placeholder="请输入">
            <template #append>ms</template>
          </el-input>
        </el-form-item>
      </div>
    </div>
  </el-form>
</template>

<script lang="ts" setup>

const props = defineProps({
  explosion: Object,
  datas: Object,
  explosionEffects: Object,
  explosionSpeeds: Object,
  explosionNumbers: Object,
});

function flushed(item) {
  item.explosionFfect = '1.0x';
  item.explosionSpeed = '缓入';
  item.explosionNumber = '1';
  item.explosionDelay = '';
  item.boomSliderValue.boomSliderValueX = 0;
  item.boomSliderValue.boomSliderValueY = 0;
  item.boomSliderValue.boomSliderValueZ = 0;
}
</script>

<style lang="less" scoped>
.action1,
.action2 {
  width: 45%;
  float: left;
}
.action2 {
  margin-left: 5%;
}
.horizontal {
  flex-direction: row !important;
  :deep(.el-form-item__content) {
    justify-content: flex-end;
  }
}
</style>
